<template>
  <div class="book-info">
    <el-container>
      <el-aside width="100px">
        <img :src="cover" :alt="title" class="cover">
      </el-aside>
      <el-main>
        <h4 class="name">
          <span style="margin-top: 0;">{{title}}</span>
          <span class="status">{{status}}</span>
        </h4>
        <p class="desc" :title="introduction">{{getIntro}}</p>
        <p class="popularity">
          <span>{{author}}</span>
          <span class="split">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
          <span class="c-red">{{watchNum}}</span>&nbsp;在读
        </p>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {toHumanString} from "../utils/util/math.js"
export default {
  props: {
    // book:{
    //   type: Object,
    // },
    title: String,
    author: String,
    cover: String,
    status: String,
    watchNum: Number,
    introduction: String,
   
    introLimit: {
      type: Number,
      default: 60
    }
  },
  computed: {
    getStatus() {
      if (this.isSerial) {
        return "连载";
      } else {
        return "完结";
      }
    },
    getIntro() {
      if (this.introduction.length > this.introLimit) {
        return this.introduction.substr(0, this.introLimit) + "...";
      } else {
        return this.introduction;
      }
    },
    getLatelyFollower() {
      return toHumanString(this.latelyFollower)
    }
  },
  methods: {
    onClick() {
      console.log("On book info click");
    }
  }
};
</script>

<style lang="stylus" scoped>
div.book-info
  margin 15px
  padding 5px
  text-align left
  border 1px solid #fff

  .cover
    float left
    width 90px
    height 120px
    border 1px solid #ebebeb
    background-position center
    background-size 100%
    box-shadow 2px 4px 6px #bbb

  .el-main
    height 130px
    padding 0px 0px 0px 6px

    .name
      height 15px
      margin-top: 0
      font-size 15px
      color #333 !important

      .status
        margin-left 10px
        font-size 12px

      .finished
        color red

      .serial
        color green

    .desc
      margin-top 0px
      height 40px
      line-height 20px
      font-size 12px
      color #999
      width: 60%

    .popularity
      margin-top 30px
      height 20px
      font-size 14px

    .c-red
      color red
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  /* overflow: auto; */
  box-sizing: border-box;
}
[class*=el-col-] {
  float: left;
  box-sizing: border-box;
  text-align: left;
}
</style>


